<template>
    <div class="baojie" v-if="this.data">
        <!-- 免费保洁 -->
        <Freebj v-if="this.data" :freebj="this.free"></Freebj>
        <div class="line-block"></div>
        <div class="baojieList1">
            <ul>
                <li v-for="index in this.common" :key="index.id">
                    <a @click="buyBtn(index.category, index.type )">
                        <i class="iconfont iconColor1" :class="[index.smallIcons, index.color]" :style="{color:index.color}"></i>
                        <p>{{ index.category }}</p>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 支付组件 Pay -->
        <mt-popup v-model="popupVisible" position="bottom" class="paybottom">
            <!-- <Pay @close="close"></Pay> -->
            <Pay :payData="payData" @close="close"></Pay>
        </mt-popup>

        <div class="line-block"></div>
        <div class="baojieList1">
            <ul>
                <li v-for="index in this.setMeals" :key="index.id">
                    <a :href="taoList(index.type)">
                        <i class="iconfont iconColor1" :class="[index.smallIcons, index.color]"></i>
                        <p>{{ index.category }}</p>
                    </a>
                </li>
            </ul>
        </div>
        <div class="line-block"></div>
        <!-- 轮播 -->
        <Lunbo :activities="this.activities"></Lunbo> 
        <!-- 超划算组合套餐 -->
        <div class="baojieBox">
            <div class="baojieContent">
                <h2 :style="note">{{ this.group.category }}</h2>
                <ul class="baojieList">
                    <li v-for="taocan2 in this.group.list" :key="taocan2.id">
                        <div class="baojieListLeft">
                            <img :src="taocan2.image[0]" alt=''>
                        </div>
                        <div class="baojieListRight">
                            <p>{{ taocan2.name }}</p>
                            <span>{{ taocan2.detail }}</span>
                            <span style="color:#F56C6C">￥{{ taocan2.price}}</span>
                            <div>
                                <a :href="detailTaocao( taocan2.itemId )">了解详情</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import Lunbo from '@/components/Lunbo.vue'
import Freebj from '@/components/Freebj.vue'
import Pay from '@/components/Pay.vue'
import { mapState,mapActions } from 'vuex'
export default {
    created(){ 
        this.getCleanData();
    },
    data() {
        return {
            note: {
                backgroundImage: "url(" + require("../../assets/images/tctitbg.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "56% 50%",
                backgroundPosition: "50% 70%"
            },
            popupVisible: false
        }
    },
    components:{
        Lunbo,
        Freebj,
        Pay
    },
    computed: {
        ...mapState({
            data: state=> state.baojieModules.data,
            payData: state => state.baojieModules.payData
        }),
        free(){
            return this.data.free || {};
        },
        common(){
            return this.data.common || {};
        },
        
        activities(){
            return this.data.activities || [];
        },
        setMeals(){
            return this.data.setMeals || [];
        },
        group(){
            return this.data.group || {};
        }
    },
    methods: {
        ...mapActions({
            getCleanData:'baojieModules/getCleanData',
            getPayData:'baojieModules/getPayData'
        }),
        buyBtn(category,type){
            this.popupVisible = true
            this.getPayData({category:category,type:type})
        },
        close(){
            this.popupVisible = false            
        },
        taoList (type) {
            return '/taoList?type=' + type
        },
        detailTaocao(itemId) {
            return "/taocandetail?itemId=" + itemId;
        }
    }
    
}
</script>

<style lang="scss">
@import "../../assets/style/bjfw.scss";
.payPop{
    position: fixed;
    bottom: 0;
    left: 0;
}
.paybottom.mint-popup{
    height: 100%;
    background: none;
}
</style>
